<template>
	<view class="chat-message-wrap">
		<view class="flex-row">
			<xbc-message-read v-if="message && message.createTime" :show="showReadStatus && !['group'].includes(message.conversationType) && isSenderThemselve" :isRead="isRead" />
			<xbc-loading v-if="!message.createTime"></xbc-loading>
			<view id="chat-message-text" v-html="messageText" class="chat-message-text" :class="{reverse: isReverse && isSenderThemselve}" @tap="onClick"></view>
			
			<template v-if="isTranslate && !translate">
				<image v-if="!isSenderThemselve && !translating" @tap="onTranslate" class="translate" src="@/static/img/svg/translate.svg"></image>
				<xbc-loading v-if="translating"></xbc-loading>
			</template>
		</view>
		<view v-if="!isSenderThemselve && translate" class="translate-result">{{ translate }}</view>
	</view>
</template>

<script>
	import XBCIM from 'xbcim'
	import mixins from '@/mixins'
	import IM from '@/common/xbcim'
	import { messageProps } from '@/hooks/useMessage'

	export default {
		mixins: [mixins],
		props: messageProps,
		data(){
			return {
				isTranslate: false,	// 是否具有翻译权限
				translating: false,	// 是否处于翻译中
				translate: '',		// 翻译结果
			}
		},
		computed: {
			messageText() {
				// 自动翻译
				if(this.message.translate){
					this.translate = JSON.parse(this.message.translate)?.data
				}
				
				// 正则替换超链接
				const regex = /(https?:\/\/[\w\-._~:/?#\[\]@!$&'()*+,;=%]+)/g
				const message = this.messageContent?.data || ''
				return message ? message.replace(regex, '<a class="chat-message-text-link" href="$1" target="_blank">$1</a>') : ''
			}
		},
		created(){
			this.isTranslate = XBCIM.isTranslate()
		},
		methods: {
			// 点击链接
			onClick(event) {
				const target = event.target
				if (target.tagName === 'A') {
					// todo
				}
			},
			// 执行翻译
			onTranslate(){
				this.translating = true
				IM.translateMessage(this.message).then(res=>{
					this.translating = false
					this.translate = JSON.parse(res?.translate || '{}')?.data
				}).catch(err=>{
					this.translating = false
				})
			},
		}
	}
</script>

<style lang="scss">
	.chat-message-text-link {
		color: #6565f7;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
</style>
<style lang="scss" scoped>
	.chat-message-wrap{
		flex: 1;
		
		> .flex-row{
			justify-content: flex-start;
		}
	}
	
	.translate {
		opacity: 0.6;
		margin-left: 16rpx;
		align-self: flex-end;
		@include fullsize(36rpx);
	}
	
	.translate-result{
		color: #333;
		display: inline-block;
		padding: 20rpx;
		font-size: 30rpx;
		margin-top: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.chat-message-text {
		color: #333;
		font-size: 30rpx;
		width: fit-content;
		user-select: text;
		padding: 20rpx 24rpx;
		word-break: break-all;
		transition: all 0.1s ease;
		border-radius: 0 10rpx 10rpx 10rpx;
		background-color: rgba(0, 0, 0, 0.05);

		&:hover {
			background-color: rgba(0, 0, 0, 0.08);
		}

		&.reverse {
			background-color: rgba(131, 216, 88, 0.8);
			border-radius: 10rpx 0 10rpx 10rpx;

			&:hover {
				background-color: rgba(131, 216, 88, 0.9);
			}
		}
	}
</style>